<!--
 * @Author: jiutian
 * @Date: 2023-03-10 16:54:16
 * @LastEditTime: 2023-03-10 19:25:25
 * @LastEditors:  
-->
<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import { useStore } from "@/store";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import request from "@/api/request";
const $router = useRouter();
const $route = useRoute();
const store = useStore();

let blogList = ref([]);
let userList = ref([]);

function getSearchList(keyword: any) {
  request["check/globalSearch"]({
    params: {
      keyword: $route.query.keyword,
    },
  }).then((res: any) => {
    if (res.code == 200) {
      blogList.value = res.data.blog;
      userList.value = res.data.user;

      blogList.value.forEach((v: any) => {
        v.blogTitleHtml = v.blogTitle.replace(
          keyword,
          `<span style='color:red;'>${keyword}</span>`
        );
        v.blogTextHtml = v.blogText.replace(
          keyword,
          `<span style='color:red;'>${keyword}</span>`
        );
      });

      userList.value.forEach((v: any) => {
        if (v.username) {
          v.usernameHtml = v.username.replace(
            $route.query.keyword,
            `<span style='color:red;'>${$route.query.keyword}</span>`
          );
        }
        if (v.phoneNumber) {
          v.phoneNumberHtml = v.phoneNumber.replace(
            $route.query.keyword,
            `<span style='color:red;'>${$route.query.keyword}</span>`
          );
        }
      });
    }
  });
}

function toDetail(e: any, type: string, item: any) {
  if (type == "1") {
    $router.push({
      name: "blogDetail",
      params: {
        id: item.id,
      },
    });
  } else {
    $router.push({
      name: "person",
      params: {
        id: item.id,
      },
    });
  }
}

watch(
  () => $router.currentRoute.value,
  (newValue, oldValue) => {
    getSearchList(newValue.query.keyword);
  },
  { immediate: true }
);

onBeforeMount(() => {
  getSearchList($route.query.keyword);
});
</script>

<template>
  <div class="search-box">
    <!-- <template> -->
    <div class="blog-box" v-if="blogList.length">
      <div class="title">博客列表</div>
      <div class="blog-list">
        <div
          class="blog-item"
          v-for="item in blogList"
          :key="item.id"
          @click="toDetail($event, '1', item)"
        >
          <div class="blog-title" v-html="item.blogTitleHtml"></div>
          <div class="blog-text" v-html="item.blogTextHtml"></div>
        </div>
      </div>
    </div>

    <div class="blog-box user" v-if="userList.length">
      <div class="title">博客列表</div>
      <div class="blog-list">
        <div
          class="blog-item"
          v-for="item in userList"
          :key="item.id"
          @click="toDetail($event, '2', item)"
        >
          <div class="user-box">
            <div class="blog-title" v-html="item.phoneNumberHtml"></div>
            <div class="line"></div>
            <div class="blog-text" v-html="item.usernameHtml"></div>
            <span>用户</span>
          </div>
        </div>
      </div>
    </div>
    <!-- </template> -->
  </div>
</template>

<style lang="scss" scoped>
.search-box {
  overflow-y: auto;
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  .blog-box {
    padding: 20px;
    .blog-item {
      cursor: pointer;
      border-radius: 8px;
      padding: 10px;
      margin: 10px 0;
      border-bottom: 1px solid #ededed;
      .blog-title,
      .blog-text {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover {
        background-color: #ededed;
      }
    }
  }
  .user {
    .user-box {
      .blog-title,
      .blog-text {
        width: auto;
      }
      display: flex;
      align-items: center;
      justify-content: flex-start;
      span {
        color: #827fff;
        margin-left: 20px;
      }
    }
  }
}
</style>